<script setup lang="ts">
import { ScalarButton, useBindCx, type LoadingState } from '@scalar/components'

const { loader, disabled = false } = defineProps<{
  loader?: LoadingState
  disabled?: boolean
}>()

defineEmits<{
  (event: 'submit'): void
  (event: 'cancel'): void
  (event: 'back', e: KeyboardEvent): void
}>()

const { cx } = useBindCx()
</script>
<template>
  <form
    class="flex w-full flex-col gap-3"
    @keydown.enter.stop
    @submit.prevent.stop="!disabled && $emit('submit')">
    <div v-bind="cx('relative flex min-h-20 flex-col rounded')">
      <slot />
    </div>
    <div class="flex gap-2">
      <div class="flex max-h-8 flex-1">
        <slot name="options" />
      </div>
      <ScalarButton
        class="max-h-8 px-3 text-xs"
        :disabled="disabled"
        :loader
        type="submit">
        <slot name="submit">Continue</slot>
      </ScalarButton>
    </div>
  </form>
</template>
